<template>
  <div class="sale" ww3 auto>
    <div class="sale-type" flex flex-b flex-c>
      <div class="sale-type-l">
        <el-radio-group v-model="radio" @change="typeChange">
          <el-radio label="1">素材</el-radio>
          <el-radio label="2">创作人</el-radio>
        </el-radio-group>
      </div>

      <div class="sale-type-r" fz-14 grey>收藏夹内共有<i>{{radio == 1 ? collectVideoList.length : collectUserList.length}}</i>个{{radio == 1?'素材':'创作人'}}</div>
    </div>
    <div class="creator-content">
      <div class="creator-item">

      </div>
    </div>
    <!-- v-show="radio == 1" -->
    <div v-show="radio == 1" class="sale-table" >
      <el-table
        :data="collectVideoList"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column
          fixed
          prop="name"
          label="全部素材"
          width="300"
          :filters="[
            { text: 'AE模板', value: 'AE模板' },
            { text: '3D模型', value: '3D模型' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <dl class="table-img" pos-a>
              <dt pos-a>
                <p pos-b ww1 style="left: 10px">{{scope.row.fileName}}</p>
                <el-image
                  ww1
                  :src="fileUrl + scope.row.filesImg1"
                  fit="cover"
                  style="width: 290px; height: 160px"
                >
                </el-image>
              </dt>
              <dd pos-b flex flex-b flex-c ww1>
                {{scope.row.resolutionRatio}}
                <span>{{$formatDuring(scope.row.fileSometimes)}}</span>
              </dd>
            </dl>
          </template>
        </el-table-column>

        <el-table-column prop="userName" label="创作人" width="130">
          
        </el-table-column>

        <el-table-column prop="categoryIds" label="类型" width="130">
        </el-table-column>

        <el-table-column prop="downloadRate" label="下载" width="130">
        </el-table-column>
        <el-table-column prop="individualPrice" label="售价（元）" width="130">
        </el-table-column>
        <!-- <el-table-column prop="zip" label="收益" width="130"> </el-table-column> -->

        <el-table-column prop="submissionTime" label="发布时间" width="100">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(1, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="card-shop-wrapper" v-show="radio == 2">
        <div class="card-l card-shop" v-for="(item,index) in collectUserList" :key="index">
          <div class="close">
            <img src="@/assets/close.svg" alt="" @click="handleDelete(2, item)">
          </div>
          <div class="img-wrapper">
            <img :src="fileUrl + item.avatar" alt="">
            <img v-if="item.authenticationType != null" class="type" src="@/assets/gr.svg" alt="">
          </div>
          <p class="card-text">{{item.nickname}}</p>
          <p class="card-income-works">近30天成交额&nbsp;&nbsp;&nbsp; <span>{{item.totle}}</span></p>
          <p class="card-income-works">作品&nbsp;&nbsp;&nbsp; <span>{{item.zp}}</span></p>
        </div>
    </div>

    <div flex ww1 style="justify-content: center">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="totle" @current-change="currentChange">
      </el-pagination>
    </div>

    
  </div>
</template>

<script>
import $http from "@/api/collection/collection"
export default {
  name: "Collection",
  data() {
    return {
      fileUrl: this.$url.fileUrl,
      pageSize: 10,
      pageNum: 1,
      totle: 1,
      radio: "1",
      input2: "",
      id: "1234",
      tableData: [
        {
          date: "100",
          name: "https://pic.vjshi.com/2021-01-27/0438e08167daaf27ab262ce1f61393ef/online/main.jpg?x-oss-process=style/resize_w_285",
          province: "炫酷",
          city: "3000",
          address: "45",
          zip: 203,
          date2: "2021-11-01",
          per: "黄千惠",
          card: "450***********23",
          satus: 1,
        },
      ],
      collectVideoList: [], 
      collectUserList: [],
      checkList: [],
    };
  },
  mounted() {
    this.getCollectPage();
  },
  methods: {
    /**
     * 分页
     */
    currentChange(value) {
      this.pageNum = value;
      if(this.radio == 1) {
        this.getCollectPage();
      } else {
        this.getCollectUserPage();
      }
      
    },
    /**
     * 删除收藏素材
     * type:1是视频，2是收藏个人
     */
    handleDelete(type, res) {
      let that = this;
      this.$confirm('确定删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        callback: action => {
          if (action === 'confirm') {
            if(type == 1) {
              let data = {
                bizId: res.videoId
              };
              $http.collectDetele(data).then(res => {
                if(res.code == 0) {
                  that.$message('删除成功');
                  that.getCollectPage();
                }
                
              });
            } else {
              let data = {
                bizId: res.userId
              };
              $http.collectUserDetele(data).then(res => {
                if(res.code == 0) {
                  that.$message('删除成功');
                  that.getCollectUserPage();
                }
                
              });
            }
            
          }
          else {
            console.log('按下 取消')
          }
        }
      })
    },
    /**
     * 获取收藏素材列表
     */
    getCollectPage() {
      let data = {
        userId: sessionStorage.getItem("userId"),
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      $http.getCollectPage(data).then((res) => {
        console.log("获取收藏素材列表",res);
        this.total = res.total;
        this.collectVideoList = res.rows;

      })
    },
    /**
     * 获取收藏创始人列表
     */
    getCollectUserPage() {
      let data = {
        userId: sessionStorage.getItem("userId"),
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      $http.getCollectUserPage(data).then((res) => {
        console.log("获取收藏素材列表",res);

        this.total = res.total;
        this.collectUserList = res.rows;

      })
    },
    // 收藏夹内容转换
    typeChange(value) {
      this.radio = value;
      this.pageNum = 1;
      if(this.radio == 1) {
        this.getCollectPage();
      } else {
        this.getCollectUserPage();
      }
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },

    handleEdit(row) {
      this.$router.push({
        name: "EditPro",
        params: {
          id: row.id,
        },
      });
    },
  },
};
</script>

<style scoped>
.img-wrapper img.type {
  position: absolute;
  right: -10px;
  bottom: -50px;
  width: 20px;
}
.close {
  text-align: right;
  padding: 5px 5px 0 0;
}
.close img {
  cursor: pointer;
}
.card-income-works {
  font-size: var(--small);
  color: var(--head-bg);
  margin-top: 16px;
}
.card-income-works span {
  color: #59cbe5;
}
.card-text {
    margin-top: 20px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 24px;
    color: #555;
}
.img-wrapper {
    width: 128px;
    height: 128px;
    margin: 0 auto;
    margin-top: 19px;
    position: relative;
}
.img-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.card-shop-wrapper {
  margin-top: 50px;
}
.card-shop {
    display: inline-block;
    width: 235px;
    height: 326px;
    border-radius: 4px;
    margin: 0 25px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 5px 15px 0 rgb(32 57 114 / 20%);
    box-shadow: 0 5px 15px 0 rgb(32 57 114 / 20%);
    -webkit-transition: all .5s;
    transition: all .5s;
    text-align: center;
    vertical-align: top;
}
.card-shop:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-box-shadow: 0 5px 25px 0 rgb(32 57 114 / 20%);
    box-shadow: 0 5px 25px 0 rgb(32 57 114 / 20%);
}
.sale-table >>> .el-table th.el-table__cell > .cell {
  color: #050404;
}
.sale-table {
  margin-bottom: 2%;
}
.sale >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #e74b3c;
}
.sale-bar p span {
  padding-right: 3%;
}
.sale-bar-r {
  width: 45%;
}
.action-wap {
}
</style>